<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

  <script src="webjars/jquery/3.6.4/jquery.min.js"></script>
  <link href="webjars/bootstrap/5.2.3/css/bootstrap.min.css" rel="stylesheet">
    <script>
        $(function (){
            $("[name='username']").blur(function (){
                var name = $(this).val();
                if(name.length==0){
                    $("#sp1").html("<font color='red'>对不起账号不能为空！</font>")
                }else{
                    $.get(
                        "hasUsername/"+name,
                         function (obj){
                            if(obj){
                                $("#sp1").html("<font color='red'>账号已存在!</font>");

                            }else{
                                $("#sp1").html("<font color='green'>OK!</font>");

                            }
                         }

                    )
                }


            })
        })
    </script>
</head>
<body>
        <div class="container">
             <form method="post" >
                   账号：<input type="text" name="username">
                    <span id="sp1"></span><br>
                   密码：<input type="password" name="password"><br>
                   姓名：<input type="text" name="realname"><br>
                   性别：<input type="radio" name="sex" value="0"> 男
                        <input type="radio" name="sex" value="1">女<br>
                   生日：<input type="text" name="birthday"><br>
                   角色：
                           <input th:each="role:${roles}" type="checkbox" name="chk" th:value="${role.rid}" th:text="${role.rname}">


                       <button class="btn btn-success">提交</button>
             </form>
        </div>

</body>
</html>
